<template>
	<div>
		<van-nav-bar
		  title="个人信息"
			left-text="返回"
			 @click-left="handleLeftClick"
		/>
		<van-cell-group>
		  <van-cell title="账号" :value="userInfo.username" />
			<van-cell title="手机号" :value="userInfo.phone" />
			<van-field
				v-model="userInfo.nickname" 
				label="昵称" 
				placeholder="请输入昵称" 
				input-align="right"
				clearable
			/>
			<van-field
			  readonly
			  clickable
			  label="城市"
			  :value="sexName"
			  placeholder="选择性别"
				input-align="right"
			  @click="showPicker = true"
			/>
			<van-popup v-model="showPicker" round position="bottom">
			  <van-picker
			    show-toolbar
			    :columns="sexList"
			    @cancel="showPicker = false"
			    @confirm="onConfirm"
			  />
			</van-popup>
			<van-field
				v-model="userInfo.email" 
				label="邮箱" 
				placeholder="请输入邮箱" 
				input-align="right"
				clearable
			/>
			<van-cell title="头像">
				<van-uploader 
					v-model="fileList" 
					 deletable
					 :after-read="handleAfterRead"
					 :max-count="1" />
			</van-cell>
			
		</van-cell-group>
		<div style="text-align: center;padding: 15px;">
			<van-button type="info" @click="handleSubmit">修改</van-button>
		</div>
	</div>
</template>

<script>
	import {findUserById,updateUser} from '@/api/user-api.js'
	export default{
		methods:{
			handleLeftClick(){
				this.$router.history.go(-1)
			},
			onConfirm(res){
				this.sexName = res[0]
				this.showPicker = false
				if(this.sexName == '男'){
					this.userInfo.sex = 0
				}else{
					this.userInfo.sex = 1
				}
			},
			handleAfterRead(file){
				let f = new FormData();
				f.append('file',file.file)
				file.status = 'loading'
				this.$http({
					url:'/log/file/upload',
					method:'post',
					data:f,
					headers:{
						'Content-Type':'multipart/form-data'
					}
				}).then(res => {
					if(res.data.code == 200){
						file.url = res.data.data.url
						file.content = res.data.data.url
						file.status = 'success'
					}
				}).catch(err => {
					
				})
			},
			async handleSubmit(){
				if(this.fileList.length>0){
					this.userInfo.face = this.fileList[0].url
				}
				await updateUser(this.userInfo)
				let res = await findUserById(this.userInfo.id)
				if(res.data.code == 200){
					this.userInfo = res.data.data
					delete this.userInfo.password
					sessionStorage.userInfo = JSON.stringify(this.userInfo)
					this.$router.history.go(-1)
				}
			}
		},
		
		data(){
			return {
				userInfo:{},
				showPicker:false,
				sexName:'',
				fileList:[],
				sexList:[
					{
						values:['男','女'],
						defaultIndex:0
					}
				]
			}
		},
		created(){
			this.userInfo = JSON.parse(sessionStorage.userInfo)
			if(this.userInfo.sex == 0){
				this.sexName = '男'
				this.sexList[0].defaultIndex = 0
			}else if(this.userInfo.sex == 1){
				this.sexName = '女'
				this.sexList[0].defaultIndex = 1
			}
			if(this.userInfo.face){
				this.fileList = [{
					file:{},
					status:'',
					url:this.userInfo.face
				}]
			}
		}
	}
</script>

<style>
</style>
